<template>
  <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700">
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="" />
            权益推荐
          </div>
          <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
            @click="drawer = false" />
        </div>
      </div>
      <div class="drawer_content">
        <div class="text">主题推荐</div>
        <div class="list-box">
          <div class="left">是否是主题推荐:</div>
          <div class="right">
            <el-switch
              v-model="IsTopicRecommend"
              active-color="#F78C53"
              inactive-color="#F5F7FA">
            </el-switch>
          </div>
        </div>
        <div class="list-box">
          <div class="left">分值:</div>
          <div class="right">
            <el-input-number size="medium" :min="0" v-model="TopicRecommendScore"></el-input-number>
          </div>
        </div>
        <div class="list-box">
          <div class="left">推荐类型:</div>
          <div class="right">
            <el-select v-model="TopicID" clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="list-box">
          <div class="left">海报:</div>
          <div class="right">
            <div>海报仅可上传1张图片，图片不超过512KB，仅支持jpg、png格式建议尺寸：高2040px，宽1300px</div>
            <imgUplode :list="PosterPath" @imgList="getImgsUrl($event,index,'Image')" :octopus="octopus" :min="1">
            </imgUplode>
          </div>
        </div>
        <div class="list-box">
          <div class="left">推荐期限:</div>
          <div class="right">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="TopicRecommend" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
       
        <div class="text">热门推荐</div>
        <div class="list-box">
          <div class="left">是否是热门推荐:</div>
          <div class="right">
            <el-switch
              v-model="IsHotRecommend"
              active-color="#F78C53"
              inactive-color="#F5F7FA">
            </el-switch>
          </div>
        </div>
        <div class="list-box">
          <div class="left">分值:</div>
          <div class="right">
            <el-input-number size="medium" :min="0" v-model="HotRecommendScore"></el-input-number>
          </div>
        </div>
        <div class="list-box">
          <div class="left">推荐期限:</div>
          <div class="right">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="HotRecommend" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        
        <div class="text">购买成功推荐</div>
        <div class="list-box">
          <div class="left">是否是购买推荐:</div>
          <div class="right">
            <el-switch
              v-model="IsPurchaseRecommend"
              active-color="#F78C53"
              inactive-color="#F5F7FA">
            </el-switch>
          </div>
        </div>
        <div class="list-box">
          <div class="left">分值:</div>
          <div class="right">
            <el-input-number size="medium" :min="0" v-model="PurchaseRecommendScore"></el-input-number>
          </div>
        </div>
        <div class="list-box">
          <div class="left">推荐期限:</div>
          <div class="right">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="PurchaseRecommend" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        
      </div>
      <div class="button_list" v-if="isEdit != 'look'">
        <button @click="save()">保存</button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import imgUplode from "@/components/Components/imgUpdate.vue";
export default {
  components: {
    imgUplode
  },
  name: "cat_dialog",
  props: {
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      // 主题推荐
      TopicRecommend: [],
      TopicRecommendEndTime: '',
      TopicRecommendStartTime: '',
      TopicRecommendScore: 0,
      PosterPath: [],
      TopicID: '',
      IsTopicRecommend:false,

      // 热门推荐
      HotRecommend: [],
      HotRecommendEndTime: '',
      HotRecommendStartTime: '',
      HotRecommendScore: 0,
      IsHotRecommend:false,

      // 购买成功推荐
      PurchaseRecommend: [],
      PurchaseRecommendEndTime: '',
      PurchaseRecommendStartTime: '',
      PurchaseRecommendScore: 0,
      IsPurchaseRecommend:false,

      groups: {
        group1: ['TopicID', 'PosterPath','TopicRecommend'],
        group2: ['HotRecommend', 'HotRecommendScore'],
        group3: ['PurchaseRecommend', 'PurchaseRecommendScore']
      },
      NoOperation: [],
      dictionaries: {
        TopicRecommend: '主题推荐截止日期不能为空',
        TopicRecommendScore: '主题推荐分值不能为0',
        PosterPath: '主题推荐海报不能为空',
        TopicID: '请选择主题推荐类型',
        HotRecommend: '热门推荐截止日期不能为空',
        HotRecommendScore: '热门推荐分值不能为0',
        PurchaseRecommend: '购买成功推荐截止日期不能为空',
        PurchaseRecommendScore: '购买成功推荐分值不能为0'
      },
      drawer: false,
      options: [],
      equityID: '',
      isEdit: 'CREATE',
      value: '1',
      storage: [],
      value: ''
    };
  },
  created() { },
  watch: {
    TopicRecommend(newValue) {
      if(newValue){
        this.TopicRecommendStartTime = newValue[0]
        this.TopicRecommendEndTime = newValue[1]
      }else{
        this.TopicRecommendStartTime = ''
        this.TopicRecommendEndTime = ''
      }
     
    },
    HotRecommend(newValue) {
      if(newValue){
        this.HotRecommendStartTime = newValue[0]
        this.HotRecommendEndTime = newValue[1]
      }else{
         this.HotRecommendStartTime = ''
         this.HotRecommendEndTime = ''
      }
      
    },
    PurchaseRecommend(newValue) {
      if(newValue){
        this.PurchaseRecommendStartTime = newValue[0]
        this.PurchaseRecommendEndTime = newValue[1]
      }else{
        this.PurchaseRecommendStartTime = ''
        this.PurchaseRecommendEndTime = ''
      }
     
    }
  },
  activated() {

  },
  mounted() {

  },
  methods: {
    // 非空判定
    checkNonEmptyReminder() {
      for (const groupName in this.groups) {
        const groupKeys = this.groups[groupName];
        const groupNotEmpty = groupKeys.some(key => {
          const value = this[key];
          // 判断值是否为空，包括值为0的情况
          return (Array.isArray(value) && value.length > 0) ||
            (!Array.isArray(value) && value !== '' && value !== 0 && value !== null && value !== undefined);
        });
        if (groupNotEmpty) {
          groupKeys.forEach(key => {
            const value = this[key];
            if ((Array.isArray(value) && value.length === 0) ||
              (!Array.isArray(value) && (value === '' || value === 0 || value === null || value === undefined))) {
              this.NoOperation.push(key);
              // 可以根据需求进行提醒操作
            }
          });
        }
      }
    },
    getRecommendType() {
      let this_ = this
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1364,
          cellData: [
            { name: "ID" },	// ID
            { name: "Name" },	// Name
            { name: "ParentkeyValue" },	// ParentkeyValue
          ],
        },
        (data) => {
          if (data.status.code == 200) {
            this_.options = data.content.queryData
          } else {
            this.octopus.tips.error(data);
          }
        });
    },
    FileListEv() {
      this.$set(this.SelectArr[index].fileList, 0, fileList[0]);
    },
    getImgsUrl(fileList) {
      this.PosterPath = fileList

    },
    getQuillContent(e) {
      this.form.deltedContent = e;
    },
    drawerOpen(data = null, type = 'CREATE') {
      this.equityID = data.ID
      this.TopicRecommend = []
      this.HotRecommend = []
      this.PurchaseRecommend = []
      this.getRecommendType()
      this.CRVoteItem(data.ID)
      this.drawer = true
    },
    // 保存
    save() {
      this.NoOperation = []
      this.checkNonEmptyReminder();
      for (let i = 0; i < this.NoOperation.length; i++) {
        const key = this.NoOperation[i];
        if (this.dictionaries.hasOwnProperty(key)) {
          const message = this.dictionaries[key];
          this.$message.error(message);
          break; // 打印一个后退出循环
        }
      }
      if (this.NoOperation.length == 0) {
        this.update_api_748()
      }
    },
    update_api_748() {
      let this_ = this
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 748,
          type: 'UPDATE',
          value: this.equityID,
          cellData: [
            { name: "TopicID", defaultValue: this_.TopicID },	// 主题ID
            { name: "PosterPath", defaultValue: JSON.stringify(this_.PosterPath) },	// 海报
            { name: "TopicRecommendEndTime", defaultValue: this_.TopicRecommendEndTime },	// 主题推荐结束时间
            { name: "TopicRecommendScore", defaultValue: this_.TopicRecommendScore },	// 主题推荐分数
            { name: "TopicRecommendStartTime", defaultValue: this_.TopicRecommendStartTime },	// 主题推荐开始时间
            {name: "IsTopicRecommend", defaultValue: this_.IsTopicRecommend ? 1 : 0},	// 是否是主题推荐


            { name: "HotRecommendEndTime", defaultValue: this_.HotRecommendEndTime },	// 热门推荐结束时间
            { name: "HotRecommendScore", defaultValue: this_.HotRecommendScore },	// 热门推荐分数
            { name: "HotRecommendStartTime", defaultValue: this_.HotRecommendStartTime },	// 热门推荐开始时间
            {name: "IsHotRecommend", defaultValue: this_.IsHotRecommend ? 1 : 0},	// 是否是热门推荐


            { name: "PurchaseRecommendEndTime", defaultValue: this_.PurchaseRecommendEndTime },	// 购买推荐结束时间
            { name: "PurchaseRecommendScore", defaultValue: this_.PurchaseRecommendScore },	// 购买推荐分数
            { name: "PurchaseRecommendStartTime", defaultValue: this_.PurchaseRecommendStartTime },	// 购买推荐开始时间
            {name: "IsPurchaseRecommend", defaultValue: this_.IsPurchaseRecommend ? 1 : 0},	// 是否是购买推荐
          ],
        },
        (data) => {
          if (data.status.code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.drawer = false;
            // this_.$emit('reload')
          } else {
            this.octopus.tips.error(data);
          }
        });
    },
    CRVoteItem(ID) {

      let this_ = this
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 748,
          cellData: [
            { name: "ID", filterKey: '=', filterValue: ID },	//ID
            { name: "TopicID" },	// 主题ID
            { name: "PosterPath" },	// 海报
            { name: "TopicRecommendEndTime" },	// 主题推荐结束时间
            { name: "TopicRecommendScore" },	// 主题推荐分数
            { name: "TopicRecommendStartTime" },	// 主题推荐开始时间
            { name: "IsTopicRecommend"},	// 是否是主题推荐


            { name: "HotRecommendEndTime" },	// 热门推荐结束时间
            { name: "HotRecommendScore" },	// 热门推荐分数
            { name: "HotRecommendStartTime" },	// 热门推荐开始时间
            { name: "IsHotRecommend"},	// 是否是热门推荐


            { name: "PurchaseRecommendEndTime" },	// 购买推荐结束时间
            { name: "PurchaseRecommendScore" },	// 购买推荐分数
            { name: "PurchaseRecommendStartTime" },	// 购买推荐开始时间
            { name: "IsPurchaseRecommend"},	// 是否是购买推荐
          ],
        },
        (data) => {
          if (data.status.code == 200) {
            let datas = data.content.queryData[0]
            // TopicRecommend: [],
            if (datas.TopicRecommendStartTime != null && datas.TopicRecommendEndTime != null) {
              this_.$set(this_.TopicRecommend, 0, datas.TopicRecommendStartTime);
              this_.$set(this_.TopicRecommend, 1, datas.TopicRecommendEndTime);
            }
            this_.TopicRecommendScore = datas.TopicRecommendScore
            this_.PosterPath = datas.PosterPath == null ? [] : JSON.parse(datas.PosterPath)
            this_.TopicID = datas.TopicID
            this_.IsTopicRecommend = datas.IsTopicRecommend == 1 ? true:false

            // 热门推荐
            // HotRecommend: [],
            if (datas.HotRecommendStartTime != null && datas.HotRecommendEndTime != null) {
              this_.$set(this_.HotRecommend, 0, datas.HotRecommendStartTime);
              this_.$set(this_.HotRecommend, 1, datas.HotRecommendEndTime);
            }
            this_.HotRecommendScore = datas.HotRecommendScore
            this_.IsHotRecommend = datas.IsHotRecommend == 1 ? true:false

            // 购买成功推荐
            // PurchaseRecommend: [],
            if (datas.PurchaseRecommendStartTime != null && datas.PurchaseRecommendEndTime != null) {
              this_.$set(this_.PurchaseRecommend, 0, datas.PurchaseRecommendStartTime);
              this_.$set(this_.PurchaseRecommend, 1, datas.PurchaseRecommendEndTime);
            }
            this_.PurchaseRecommendScore = datas.PurchaseRecommendScore
            this_.IsPurchaseRecommend = datas.IsPurchaseRecommend == 1 ? true:false
          } else {
            this.octopus.tips.error(data)
          }
        });

    },
  },
};
</script>
<style scoped>
.text {
  font-size: 1.8rem;
  margin-top: 2rem;
}

.optionList {
  display: flex;
  margin: 20px 0;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
  font-size: 1.6rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin-top: 1rem;
  padding: 0 3rem;
  display: flex;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 11rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.content-box {
  display: flex;
  align-items: center;
  margin: 2rem 0 2rem 2em;
}

.mt-10 {
  margin-top: 10rem;
}

.content-box .label {
  width: 25%;
  font-size: 1.6rem;
}

.content-box .label .label-bold {
  font-size: 1.8rem;
  font-weight: bold;
}

.content-box .desc {
  flex: 1;
  font-size: 1.6rem;
}

.list-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.list-box {
  line-height: 4rem;
  padding-left: 10%;
  width: 90%;
  margin-top: 2rem;
}

.list-box .left {
  width: 20%;
  font-size: 1.5rem;
}

.list-box .right {
  width: 80%;
}

.button_list {
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  position: absolute;
  background-color: #ffff;
  bottom: 1rem;
  width: calc(100% - 7rem);
}

.button_list button {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #F78C53;
  cursor: pointer;
}
</style>